<style lang='less'>
</style>
<template>
  <div class="container">
    <Row >
      <Col span="11">
        <Card style="margin-top:20px;">
          <div id="zdpcdxDistrict2" :style="{ width: bwidth + 'px', height: bheight + 'px'}"></div>
        </Card>
      </Col>
      <Col span="2">
      </Col>
      <Col span="11">
        <Card style="margin-top:20px;">
          <div id="zdpcdxDistrict3" :style="{ width: bwidth + 'px', height: bheight + 'px'}"></div>
        </Card>
      </Col>
    </Row>
    <Row>
      <Card style="margin-top:20px">
        <div id="zdpcdxDistrict" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Card>
    </Row>
    <Row>
      <Card style="margin-top:20px">
        <div id="zdpcdxDistrict1" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Card>
    </Row>
  </div>
</template>

<script>
import { getCountFromTo, findUserDoCountList, getCountCaozuo, findUserCaozuoCountList } from '@/api/yi-qing-fang-kong'
import * as echarts from 'echarts'
export default {
  data () {
    return {
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 1000
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    },
    bwidth: {
      type: Number,
      default: () => {
        return 490
      }
    },
    bheight: {
      type: Number,
      default: () => {
        return 490
      }
    }
  },
  methods: {
    getCountFromTo () {
      getCountFromTo().then(res => {
        if (res.data.errcode === 0) {
          let data = [
            {
              value: res.data.data.me_to,
              name: '任务量'
            },
            {
              value: res.data.data.to_me,
              name: '处理量'
            }
          ]
          let option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: data
              }
            ]
          }
          let myChart = echarts.init(document.getElementById('zdpcdxDistrict2'))
          myChart.setOption(option)
          let option1 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center',
              data: ['任务量', '处理量']
            },
            xAxis: {
              type: 'category',
              data: ['任务量', '处理量'],
              axisPointer: {
                type: 'shadow'
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [res.data.data.me_to, res.data.data.to_me],
                type: 'bar'
              }
            ]
          }
          let myChart1 = echarts.init(document.getElementById('zdpcdxDistrict3'))
          myChart1.setOption(option1)
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    findUserDoCountList () {
      findUserDoCountList().then(res => {
        if (res.data.errcode === 0) {
          let xAxisdata = []
          let adata = []
          let bdata = []
          res.data.data.forEach(item => {
            xAxisdata.push(item.data)
            adata.push(item.to_me)
            bdata.push(item.me_to)
          })
          let option = {
            title: {
              text: '近七日我的近七日任务量、处理量'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['任务量', '处理量']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: xAxisdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '任务量',
                type: 'line',
                data: adata
              },
              {
                name: '处理量',
                type: 'line',
                data: bdata
              }
            ]
          }
          let myChart = echarts.init(document.getElementById('zdpcdxDistrict1'))
          myChart.setOption(option)
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getCountCaozuo () {
      getCountCaozuo().then(res => {
        if (res.data.errcode === 0) {
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    findUserCaozuoCountList () {
      findUserCaozuoCountList().then(res => {
        if (res.data.errcode === 0) {
          let xAxisdata = []
          let adata = []
          let bdata = []
          let cdata = []
          res.data.data.forEach(item => {
            xAxisdata.push(item.data)
            adata.push(item.zhipai)
            bdata.push(item.shilian)
            cdata.push(item.hengchuan)
          })
          console.log(adata, 'a')
          console.log(bdata, 'b')
          console.log(cdata, 'c')
          let option = {
            title: {
              text: '近七日我的操作任务量'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['指派', '失联', '横传']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: xAxisdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '指派',
                type: 'line',
                data: adata
              },
              {
                name: '失联',
                type: 'line',
                data: bdata
              },
              {
                name: '横传',
                type: 'line',
                data: cdata
              }
            ]
          }
          let myChart = echarts.init(document.getElementById('zdpcdxDistrict'))
          myChart.setOption(option)
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    init () {
      this.getCountFromTo()
      this.findUserDoCountList()
      this.getCountCaozuo()
      this.findUserCaozuoCountList()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
